<!--  -->
<template>
    <div class="page page-discover page_hasFooter">
        <search 
        class="search"
        v-model="value"
        ref="search"
        :auto-fixed="false"></search>
        <swiper auto height="100px">
            <swiper-item class="black1"><h2 class="title fadeInUp animated">一起写出赛博朋客的世界</h2></swiper-item>
            <swiper-item class="black2"><h2 class="title fadeInUp animated">听听关于你的“摆渡人”故事</h2></swiper-item>
            <swiper-item class="black3"><h2 class="title fadeInUp animated">全网搜查侦探小说家</h2></swiper-item>
            <swiper-item class="black4"><h2 class="title fadeInUp animated">接龙大战2.0</h2></swiper-item>
            <swiper-item class="black"><h2 class="title fadeInUp animated">4.30零周年庆</h2></swiper-item>
            <swiper-item class="black"><h2 class="title fadeInUp animated">广告旺位招商</h2></swiper-item>
        </swiper>
        <div class="scroll" id="scroll">
            <scroller lock-y :scrollbar-x=false>
                <div class="box1">
                    <div class="box1-item" v-for="i in 8">
                        <span >{{'' + i + ''}}</span>
                    </div>
                </div>
            </scroller>
        </div>
        <o-panel v-for="i in 10"
                 :key="i"
                 :list="panelList" 
                 link="/contents"
                 header title footer></o-panel>
    </div>
</template>

<script>
import { Scroller,Search,Swiper,SwiperItem } from 'vux'
export default {
    components: {
        Scroller,
        Search,
        Swiper,
        SwiperItem,
    },
    data () {
        return {
            results: [],
            value: 'test',
            pageTitle: "发现",
            panelList:{
                src: 'http://www.qqzhi.com/uploadpic/2014-09-23/000247589.jpg',
                user: '欧燕',
                time: '17:23',
                title: '由各种物质组成的巨型球状天体，叫做星球。',
                desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                likes: 666,
                comments: 66                
            }
        };
    },
    mounted(){
        this.$nextTick(()=>{
            this.$refs.scrollerEvent.reset({top:0})
        })
        this.$nextTick(()=>{
            this.$refs.scrollerBottom.reset({top:0})
        })
    },
    computed: {},

    methods: {
        onImgError (item, $event) {
            console.log(item, $event)
        }
    }
}

</script>

<style lang='less' scoped>
.box1{
    height: 100px;
    position: relative;
    width: 785px;
    margin-top: 15px;
}
.box1-item{
    border-radius: 8px;
    width: 85px;
    height: 85px;
    background-color: #ccc;
    display: inline-block;
    margin-left: 15px;
    float: left;
    text-align: center;
    line-height: 100px;
}
.box1-item:first-child{
    margin-left: 0;
}
.search{
        position: static;
}
.black {
  background-color: #000;
}
.black1{
    background-image: url('../assets/saibopengke.jpg');
    background-size: 100% 100%;
}
.black2{
    background-color: #2c2c2b;
    font-family:'隶书';
    font-size: 15px;
    background-size: 100% 100%;
}
.black3{
    background-image: url('../assets/zhentan.jpg');
    background-size: 100% 100%;
}
.black4{
    background-image: url('../assets/longbiao.jpg');
    background-size: 100% 100%;
}
.title{
  line-height: 100px;
  text-align: center;
  color: #fff;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.scroll{
    background-color: #E7EEF5;
    height: 115px;
}
</style>